<!--calendar-->
<template>
  <WeekCalendar :columns="columns" :match-days="match" @change="a" @selectChange="a"></WeekCalendar>
</template>

<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import WeekCalendar, { WeekCalendarColumns } from '@/components/week-calendar/WeekCalendar.vue'
function a(data) {
  console.log(data)
}
const columns: Array<WeekCalendarColumns> = [
  {
    timeQuantum: 'AM',
    startTime: '9:00',
    stopTime: '9:45',
  },
  {
    timeQuantum: 'AM',
    startTime: '10:00',
    stopTime: '10:45',
  },
  {
    timeQuantum: 'PM',
    startTime: '2:00',
    stopTime: '2:45',
  },
  {
    timeQuantum: 'PM',
    startTime: '3:00',
    stopTime: '3:45',
  },
]
const match = [
  {
    time: dayjs(new Date(2022, 9, 3, 9, 0, 0)),
    value: {
      name: '茶艺初级1',
    },
  },
  {
    time: dayjs(new Date(2022, 9, 3, 9, 20, 0)),
    value: {
      name: '机械制图1',
    },
  },
  {
    time: dayjs(new Date(2022, 9, 5, 9, 20, 0)),
    value: {
      name: '星期三1',
    },
  },
  {
    time: dayjs(new Date(2022, 9, 5, 10, 20, 0)),
    value: {
      name: '星期三2',
    },
  },
]
</script>

<style scoped lang="scss"></style>
